<!-- 
  vue3升级了哪些重要的功能：
    1）没有Vue  取而代之的是createApp
    2）新增了emits属性
    3）生命周期
    4）多事件
    5）Fragment 
    6）移除了.sync 
    7）异步组件的写法
    8）移除了过滤器
    9）Telport
    10）Suspense
    11）Composition API

--------------------------------------------------
const app = Vue.createApp({选项}); // vue3
app.use()
app.mixin()
app.component()
app.directive()

const vm = new Vue({选项}); // vue2
Vue.use()
Vue.mixin()
Vue.component()
Vue.directive()
--------------------------------------------------
新增了emits属性:
  <HelloWorld :msg="msg" @onSayHello="sayHello" />

  export default{
    name:"HelloWorld",
    props:{
      msg:String
    },
    emits:['onSayHello'],
    setup(props,{emit}){
      emit("onSayHello",666)
    }
  }

--------------------------------------------------
多事件:
  <button @click="one($event), two($event)">submit</button>

--------------------------------------------------
Fragment: React.Fragment  <></>
  vue2:
    <template>
      <div>
          <h3>{{msg}}</h3>
          <div>我是一个div</div>
      </div>
    </template>
  vue3:
    <template>
        <h3>{{msg}}</h3>
        <div>我是一个div</div>
    </template>
    

--------------------------------------------------
移除了.sync:
    vue2:
      <MyComponent v-bind:title.sync="title"></MyComponent>
    vue3:
      <MyComponent v-model:title="title"></MyComponent>

--------------------------------------------------
异步组件的写法:
    vue2:
      new Vue({
        components:{
          'home':()=>import('./components/home.vue')
        }
      })
    vue3:
      import {createApp, definedAsyncComponet} from "vue"
      createApp({
        components:{
          AsyncComponent:definedAsyncComponet(()=>
            import('./components/home.vue')
          )
        }
      })

--------------------------------------------------
移除了过滤器:
    vue2:
      {{ money | filter1 }}
      <div v-bind="money | filter2"></div>

--------------------------------------------------
Telport:
    指定一片dom元素最终渲染到什么地方。 
      <body>
          <div id="app">xxxxxx <modal></modal></div>
      </body>
    目的：
      <body>
        <div id="app">xxxxxx</div>
        <modal></modal>
      </body>

    <button @click="modalOpen = true">Open Modal(全屏)</button>

    <teleport to="body">
        <div v-if="modalOpen" class="modal">
          <div>
             弹窗（期望它的父标签是body）
             <button @click="modalOpen = false">Close</button>
          </div>
        </div>
    </teleport>

--------------------------------------------------
Suspense:
    <Suspense>
        <template>
            <AsyncComponent></AsyncComponent>  是一个异步组件
        </template>
        // #faallback就是一个具名插槽
        // Suspense是一个组件，组件内容，有两个slot，其中一个名字就是fallback
        <template #fallback>
          Loading...
        </template>
    </Suspense>

--------------------------------------------------
Composition API:
    reactive
    ref toref torefs 
    readonly
    watch 
    watchEffect
    setup
    computed
    生命周期钩子函数

--------------------------------------------------
vue3升级了哪些功能？
    1）createApp
    2）emits属性
    3）生命周期也变了
    4）多事件
    5）Fragment
    6）移除了.sync  取而代之是v-model:xxx
    7）异步组件写法
    8）移除了filter
    9）Teleport
    10）Suspense
    11）Componsition API


--------------------------------------------------

 -->